<template>
  <pui-drawer show title="分析器管理" position="right">
    <div class="resource-drawer-content">
      <div class="resource-tab">
        <div class="tabs-content">
          <div class="tabs-tree">
            <pui-tree :show="true" :dataList="mainRef.treeList" @onNodeClick="itemClickHandle"></pui-tree>
          </div>
          <!-- <pui-tree :dataList="mainRef.treeList2"></pui-tree> -->
        </div>
        <div class="file-content" id="detail">
          <div class="parameter-tab">
            <div class="file-info">
              <div
                class="file-info-item"
                v-for="item in mainRef.parameter"
                :key="item.val"
              >
                <span class="name">{{ item.attr }}</span>
                <span v-if="item.show" class="value">{{ item.val }}</span>
                <pui-selector v-if="!item.show" :dataList="mainRef.stateList" v-model="selectState" clearAble></pui-selector>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AnalyzeManager"
})
</script>
<script lang="ts" setup>
import { reactive, watch, ref } from "vue";
const emit = defineEmits({
  'changeState': (val: any) => {},
  'add': (val: any) => {}
})
const mainRef = reactive({
  treeList: [
    // {
    //   label: "16-QAM over 10km SMF",
    //   value: "0-1",
    //   children: [
    //     {
    //       label: "2023/03/05/18:00",
    //       value: "0-1-1",
    //       children: [
    //         {
    //           label: "眼图",
    //           value: "0-1-1-1",
    //           show: false,
    //           fn:() => {
    //             focusFile("眼图")
    //           }
    //         },
    //         {
    //           label: "波形图",
    //           value: "0-1-1-2",
    //           show: false,
    //           fn:() => {
    //             focusFile("波形图")
    //           }
    //         },
    //         {
    //           label: "星座图",
    //           value: "0-1-1-3",
    //           show: false,
    //           fn:() => {
    //             focusFile("星座图")
    //           }
    //         },
    //         {
    //           label: "误码率",
    //           value: "0-1-1-4",
    //           show: false,
    //           fn:() => {
    //             focusFile("误码率")
    //           }
    //         },
            
    //       ],
    //     },
    //     {
    //       label: "2023/03/07/19:00",
    //       value: "0-1-2",
    //       children: [
    //         {
    //           label: "眼图",
    //           value: "0-1-2-1",
    //           show: false,
    //           fn:() => {
    //             focusFile("眼图")
    //           }
    //         },
    //         {
    //           label: "波形图",
    //           value: "0-1-2-2",
    //           show: false,
    //           fn:() => {
    //             focusFile("波形图")
    //           }
    //         },
    //         {
    //           label: "星座图",
    //           value: "0-1-2-3",
    //           show: false,
    //           fn:() => {
    //             focusFile("星座图")
    //           }
    //         },
    //         {
    //           label: "误码率",
    //           value: "0-1-2-4",
    //           show: false,
    //           fn:() => {
    //             focusFile("误码率")
    //           }
    //         },
            
    //       ],
    //     },
    //   ],
    // },
  ] as any[],
  treeList2: [
  {
    label: "器件仿真",
    value: "0-1",
    children :[
    {
      label: "电场E",
      value: "0-1-1",
      show: false,
      fn:() => {
        focusFile("电场E")
      }
    },
    ]
  },
  ] as any[],
  stateList: [
    {
      label: '默认',
      value: '1'
    },
    {
      label: 'Dark',
      value: '2'
    }
  ] as any[],
  parameter: [
    {
      attr: "分析器实体ID",
      show: true,
      val: "SignalAnalyzer_vtms1",
    },
    {
      attr: "窗口标题",
      show: true,
      val: "",
    },
    {
      attr: "图表主题",
      show: false,
      val: "1.0",
    },
  ],
  nowResource: [] as any[],
});
const selectState = ref('1')
watch(selectState,(newValue) => {
  emit('changeState',newValue)
})
//点击文件列表
const focusFile = (val: any) => {
  mainRef.parameter[1].val = val
  emit('add',val)
}
//焦点窗口改变
const focusChange = (val:any, state:any) => {
  mainRef.parameter[1].val = val
  selectState.value = state
}
const itemClickHandle = (e: any) => {
  console.log(e)
}
const init = (e: any) => {
  const tree = {
      label: e.graph.name,
      value: e.graphId,
      children: []
  } as any
  for (let idx = 0; idx < e.componentOutputs.length; idx++) {
      const signals = e.componentOutputs[idx].signals
      let index = 0
      if (e.isAnalyzer) {
          tree.children.push({
              label: '星座图',
              value: 'planis-phere',
              fn: () => {
                focusFile("星座图")
              }
          })
      } else {
          let index = 0
          const signals = e.componentOutputs[idx].signals
          for (let i = 0; i < signals.length; i++) {
            if (i < 2) {
                tree.children.push({
                    label: '星座图',
                    value: 'planis-phere',
                    fn: () => {
                      focusFile("星座图")
                    }
                })
                index++
              }
          }
      }
  }
  mainRef.treeList = [tree]
}
defineExpose({
  focusChange,
  init
})
</script>

<style lang="scss" scoped>
.resource-drawer-content {
  height: 100%;
  .resource-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
    .tabs-content {
      flex: 1;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      border-bottom: 10px solid #D4D7DE;
      overflow-y: auto;
      .tabs-tree {
        :deep(.pui-tree) {
          .pui-tree_box {
            border: none!important;
          }
        }
      }
    }
    .file-content {
      height: 45%;
      width: 100%;
      flex-shrink: 0;
      margin:0;
      box-sizing: border-box;
      .parameter-tab {
        overflow-y: auto;
        .file-info {
          box-sizing: border-box;
          .file-info-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 12px;
            padding: 6px;
            &:nth-child(2n - 1) {
              background: #F5F7FA;
            }
            .name {
              text-align: right;
              padding-right: 10px;
              padding-top: 3px;
              width: 38%;
              flex-shrink: 0;
              font-size: 12px;
            }
            .value {
              flex: 1;
              font-size: 12px;
            }
            &.file-info-header {
                font-weight: bold;
                background: #E6E8EB;
            }
          }
        }
      }
    }
  }
}
</style>